<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
</script>

<template>
  <WelcomeItem>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Vue3组合式API及实践</template>

    <ul>
      <!-- https://juejin.cn/post/7260070602614620221 -->
      <li><router-link to="/composition/NormalLife">生命周期</router-link></li>
      <li><router-link to="/composition/lifecircle">嵌套生命周期</router-link></li>
      <li><router-link to="/transport/father">watch</router-link></li>
      <!-- https://blog.csdn.net/yinmaisoft/article/details/136657791 -->
      <!-- <li>computed、watch、watchEffect</li> -->
    </ul>
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <ToolingIcon />
    </template>
    <template #heading>Vue3 常见的数据流向处理实践</template>

    <ul>
      <li><router-link to="/transport/father">父子(异步)传值</router-link></li>
      <li><router-link to="/transport/grandpa">爷孙（异步）传值</router-link></li>
      <li><router-link to="/transport/grandpaB">爷孙（异步）传值2</router-link></li>
      <li><router-link to="/transport4">数据编辑，多级组件数据流向实践</router-link></li>
    </ul>
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <EcosystemIcon />
    </template>
    <template #heading>Vite、Pina</template>
    <ul>
      <li><router-link to="/todo">TODO</router-link></li>
    </ul>
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <CommunityIcon />
    </template>
    <template #heading>ES7+新特性及实践</template>
    <ul>
      <li><router-link to="/todo">TODO</router-link></li>
    </ul>
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <SupportIcon />
    </template>
    <template #heading>H5开发实践</template>
    <ul>
      <li><router-link to="/todo">TODO</router-link></li>
    </ul>
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>微信公众号和小程序</template>
    <ul>
      <li><router-link to="/todo">TODO</router-link></li>
    </ul>
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <ToolingIcon />
    </template>
    <template #heading>安卓与iOS套壳H5</template>
    <ul>
      <li><router-link to="/todo">TODO</router-link></li>
    </ul>
  </WelcomeItem>
</template>
